<template>
  <div class="card-panel-0">
    <div class="card-panel-text">
      当日访问量
    </div>
    <count-to :start-val="totalNumPre" :end-val="totalNum" :duration="3200" class="card-panel-num" />
  </div>

  <div class="card-panel-1">
    <div class="card-panel-text">
      成功笔数
    </div>
    <count-to :start-val="succNumPre" :end-val="succNum" :duration="3200" class="card-panel-num" />
  </div>

  <div class="card-panel-2">
    <div class="card-panel-text">
      失败笔数
    </div>
    <count-to :start-val="failNumPre" :end-val="failNum" :duration="3200" class="card-panel-num" />
  </div>
</template>

<script>
  import CountTo from "../../components/vue-count-to/vue-countTo"
  import drawMixin from "../../utils/drawMixin";
  // import { getApiInvorkNum } from '@/api/apiInvorkRecode'
  export default {
    mixins: [drawMixin],
    components: {
      CountTo
    },
    data() {
      return {
        totalNumPre: 0,
        succNumPre: 0,
        failNumPre: 0,
        totalNum: 0,
        succNum: 0,
        failNum: 0,
        chartTimer: null
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        this.chartTimer = setInterval(() => {
          // getApiInvorkNum().then(response => {
          //   this.totalNumPre = this.totalNum
          //   this.succNumPre = this.succNum
          //   this.failNumPre = this.failNum
          //   this.totalNum = response.apiInvorkNum
          //   this.succNum = response.apiInvorkSucc
          //   this.failNum = response.apiInvorkFail
          // });
        }, 5*1000)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .panel-group {
    .card-panel-0 {
      position: absolute;
      top: 10%;
      left: 10%;
      height: 80%;
      width: 40%;
      background: #a8a6a6;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      border-color: rgba(0, 0, 0, .05);
      border-radius: 8px;
      .card-panel-text {
        position: relative;
        top: 20px;
        font-size: 36px;
        font-weight: bold;
      }

      .card-panel-num {
        position: relative;
        top: 30px;
        /*position: absolute;*/
        /*top: 40%;*/
        /*left: 20px;*/
        font-size: 54px;
        font-weight: bold;
      }
    }

    .card-panel-1 {
      position: absolute;
      top: 10%;
      left: 51%;
      height: 38.5%;
      width: 40%;
      background: #58c11f;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      border-color: rgba(0, 0, 0, .05);
      border-radius: 8px;
      .card-panel-text {
        /*position: absolute;*/
        /*top: 20px;*/
        /*left: 20px;*/
        font-size: 36px;
        font-weight: bold;
      }
      .card-panel-num {
        /*position: absolute;*/
        /*top: 20px;*/
        /*left: 80%;*/
        font-size: 46px;
        font-weight: bold;
      }
    }

    .card-panel-2 {
      position: absolute;
      top: 50.5%;
      left: 51%;
      height: 38.5%;
      width: 40%;
      background: #ef6306;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      border-color: rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      .card-panel-text {
        /*position: absolute;*/
        /*top: 20px;*/
        /*left: 5%;*/
        font-size: 36px;
        font-weight: bold;
      }
      .card-panel-num {
        /*position: absolute;*/
        /*top: 20px;*/
        /*left: 80%;*/
        font-size: 46px;
        font-weight: bold;
      }
    }
  }
</style>
